<template>
  <div id="window_header">
    <windowTopMenuManage></windowTopMenuManage>
  </div>
  <div id="window_work">
    <div id="window_function">
      <div id="window_function_choice" @click="window_show.window_function_show = !window_show.window_function_show">
      </div>
      <div id="window_function_show" v-show="window_show.window_function_show">
        <windowFileManage ref="ref_windowFileManage" :sessionToken="sessionToken"></windowFileManage>
      </div>
    </div>
    <div id="split_window_function_show" class="split_line" v-show="visible_window_function_show"></div>
    <div id="window_edit">
      <windowEditorManage ref="ref_windowEditorManage" :sessionToken="sessionToken" :width="100"
                          :height="window_size.window_edit.height"></windowEditorManage>
    </div>
    <div id="split_show" class="split_line" style="background-color: #ffde0a"></div>
  </div>
  <div id="window_status">
    <windowTaskManage ref="ref_windowTaskManage" :sessionToken="sessionToken"></windowTaskManage>
  </div>
  <div id="split_show_mask"></div>
</template>

<script>
import axios from 'axios'
import {ElNotification, ElLoading} from 'element-plus'
import windowFileManage from "@/components/windowFileManage";
import windowEditorManage from "@/components/windowEditorManage";
import windowTaskManage from "@/components/windowTaskManage";
import windowTopMenuManage from "@/components/windowTopMenuManage";

export default {
  name: "viewMainWindow",
  props: {
    sessionToken: String,
  },
  components: {
    windowFileManage,
    windowEditorManage,
    windowTaskManage,
    windowTopMenuManage
  },
  data() {
    return {
      window_show: {
        window_header: true,
        window_work: true,
        window_function: true,
        window_function_choice: true,
        window_function_show: false,
        window_edit: true,
        window_status: true,
      },
      window_size: {
        window_width_min: 960,
        window_height_min: 480,
        window_width_all: 0,
        window_height_all: 0,
        window_function: {width: 200},
        window_function_choice: 20,
        window_function_show: {width: 180},
        window_edit: {width: 960 - 200, height: 0},
        window_header: {height: 30},
        window_status: {height: 20},

      },
      window_obj: {}
    }
  },
  methods: {
    width_reduce_percent() {

    },
    window_width_get() {
      this.window_size.window_width_all = this.window_size.window_width_min > document.body.clientWidth ? this.window_size.window_width_min : document.body.clientWidth;
      this.window_size.window_height_all = this.window_size.window_height_min > document.body.clientHeight ? this.window_size.window_height_min : document.body.clientHeight;
      if (!this.window_show.window_function_show) this.window_size.window_function.width = this.window_size.window_function_choice
      this.window_size.window_edit.width = this.window_size.window_width_all - this.window_size.window_function.width
      this.window_size.window_edit.height = this.window_size.window_height_all - this.window_size.window_status.height - this.window_size.window_header.height
      if (this.window_size.window_function.width > this.window_size.window_width_all - 100)
        this.window_size.window_function.width = this.window_size.window_width_all - 100
      // console.log(this.window_size.window_width_all, this.window_size.window_function.width, this.window_size.window_edit.width)
    },
    window_obj_get() {
      this.window_width_get()
      this.window_obj.app = document.getElementById("app")
      this.window_obj.window_header = document.getElementById("window_header")
      this.window_obj.window_work = document.getElementById("window_work")
      this.window_obj.window_status = document.getElementById("window_status")
      this.window_obj.window_function = document.getElementById("window_function")
      this.window_obj.window_edit = document.getElementById("window_edit")
      this.window_obj.split_show = document.getElementById("split_show")
      this.window_obj.split_show_mask = document.getElementById("split_show_mask")
    },
    window_work_width_reset() {
      this.window_width_get()
      this.window_obj.app.style.minWidth = this.window_size.window_width_min + "px"
      this.window_obj.app.style.minHeight = this.window_size.window_height_min + "px"
      this.window_obj.window_header.style.height = this.window_size.window_header.height + "px"
      this.window_obj.window_work.style.height = this.window_size.window_height_all - this.window_size.window_header.height - this.window_size.window_status.height + "px"
      this.window_obj.window_status.style.height = this.window_size.window_status.height + "px"
      this.window_obj.window_function.style.width = this.window_size.window_function.width + "px"
      this.window_obj.window_edit.style.width = this.window_size.window_edit.width + "px"
      this.window_obj.split_show.style.height = this.window_size.window_height_all + "px"
      this.window_obj.split_show_mask.style.width = this.window_size.window_width_all + "px"
      this.window_obj.split_show_mask.style.height = this.window_size.window_height_all + "px"
    },
    window_work_width_event_listen() {
      let obj_this = this
      window.onresize = () => {
        return (() => {
          obj_this.width_reduce_percent()
          obj_this.window_work_width_reset()
        })()
      };
      let split_window_function_show = document.getElementById("split_window_function_show");
      let dragFlag_split_c2l = false;
      let pre_position_x = 0;
      split_window_function_show.onmousedown = function (e) {
        dragFlag_split_c2l = true;
        obj_this.window_obj.split_show_mask.style.display = "block"
        obj_this.window_obj.split_show.style.display = "block"
        obj_this.window_obj.split_show.style.top = 0;
        obj_this.window_obj.split_show.style.left = e.clientX - (split_window_function_show.offsetWidth / 2) + "px";
        pre_position_x = e.clientX
      };
      window.onmousemove = function (e) {
        if (dragFlag_split_c2l) {
          obj_this.window_obj.split_show.style.left = e.clientX - (split_window_function_show.offsetWidth / 2) + "px";
          window.getSelection().removeAllRanges()  /*防止拖动的时候选中文本*/
        }
      };
      window.onmouseup = function (e) {
        if (dragFlag_split_c2l) {
          let target_clientX = e.clientX
          if (target_clientX < 50) target_clientX = 50
          if (target_clientX > obj_this.window_size.window_width_all - 100)
            target_clientX = obj_this.window_size.window_width_all - 100
          obj_this.window_size.window_function.width += (target_clientX - pre_position_x)
          obj_this.window_size.window_function_show.width = obj_this.window_size.window_function.width - obj_this.window_size.window_function_choice
          obj_this.window_obj.split_show_mask.style.display = "none"
          obj_this.window_obj.split_show.style.display = "none"
          obj_this.window_work_width_reset()
          dragFlag_split_c2l = false;
        }
      }
      split_window_function_show.addEventListener('touchstart', function (e) {
        dragFlag_split_c2l = true;
        obj_this.window_obj.split_show_mask.style.display = "block"
        obj_this.window_obj.split_show.style.display = "block"
        obj_this.window_obj.split_show.style.top = 0;
        obj_this.window_obj.split_show.style.left = e.targetTouches[0].pageX - (split_window_function_show.offsetWidth / 2) + "px";
        pre_position_x = e.targetTouches[0].pageX
        e.preventDefault();	// 阻止屏幕滚动的默认行为
      })
      split_window_function_show.addEventListener('touchmove', function (e) {
        if (dragFlag_split_c2l) {
          obj_this.window_obj.split_show.style.left = e.targetTouches[0].pageX - (split_window_function_show.offsetWidth / 2) + "px";
          window.getSelection().removeAllRanges()  /*防止拖动的时候选中文本*/
          obj_this.target_clientX = e.targetTouches[0].pageX
        }
        e.preventDefault();	// 阻止屏幕滚动的默认行为
      })
      split_window_function_show.addEventListener('touchend', function (e) {
        if (dragFlag_split_c2l) {
          let target_clientX = obj_this.target_clientX
          if (target_clientX < 50) target_clientX = 50
          if (target_clientX > obj_this.window_size.window_width_all - 100)
            target_clientX = obj_this.window_size.window_width_all - 100
          obj_this.window_size.window_function.width += (target_clientX - pre_position_x)
          obj_this.window_size.window_function_show.width = obj_this.window_size.window_function.width - obj_this.window_size.window_function_choice
          obj_this.window_obj.split_show_mask.style.display = "none"
          obj_this.window_obj.split_show.style.display = "none"
          obj_this.window_work_width_reset()
          dragFlag_split_c2l = false;
        }
        e.preventDefault();	// 阻止屏幕滚动的默认行为
      })
    },
    session_setting_read(callback) {
      let obj_this = this
      let data = {
        "session_token": obj_this.sessionToken,
        "session_function": "session_setting_read"
      }
      axios.post('/session_function_do', data).then(function (response) {
        Object.assign(obj_this.$store.state.obj_setting_map, response.data.data)
        obj_this.loading.close()
        ElNotification({
          title: "设置加载完成",
          type: 'success',
          duration: 1000,
        })
        if (callback) callback()
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
  },
  mounted() {
    this.loading = ElLoading.service({
      lock: true,
      text: '正在加载主界面',
      background: 'rgba(125, 125, 125, 0.9)',
    })
    this.$store.state.obj_mainWindow = this
    this.$store.state.obj_windowEditorManage = this.$refs.ref_windowEditorManage
    this.$store.state.obj_windowTaskManage = this.$refs.ref_windowTaskManage
    this.$store.state.obj_windowFileManage = this.$refs.ref_windowFileManage
    this.window_obj_get()
    this.window_work_width_reset()
    this.window_work_width_event_listen()
    this.session_setting_read()
  },

  computed: {
    visible_window_function_show: function () {
      return this.window_show.window_function_show;
    }
  },
  watch: {
    visible_window_function_show: function (newValue) {
      // console.log(newValue, oldValue)
      if (newValue === false) {
        this.window_size.window_function.width = this.window_size.window_function_choice
      } else {
        this.window_size.window_function.width = this.window_size.window_function_choice + this.window_size.window_function_show.width
      }
      this.window_work_width_reset()
    }
  }
}
</script>

<style>
html {
  border: none;
  margin: 0;
  height: 100%;
  width: 100%;
  /*background-color: #2c3e50;*/
}

body {
  border: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  /*background-color: purple;*/
}

#app {
  height: 100%;
  width: 100%;
  /*min-height: 480px;*/
  /*min-width: 960px;*/
  overflow: hidden;
}

#window_header {
  /*height: 20px;*/
  width: 100%;
  /*background-color: red;*/
}

#window_work {
  display: flex;
  /*height: calc(100% - 40px);*/
  width: 100%;
  /*background-color: #74c241;*/
}

#window_status {
  height: 20px;
  width: 100%;
}

#window_function {
  display: flex;
  width: 500px;
  height: 100%;
  /*background-color: #f50039;*/
}

#window_function_choice {
  width: 20px;
  height: 100%;
  background-color: rgba(0, 91, 245, 0.5);
  overflow: auto;
  user-select: none;
  transition: 0.5s;
  cursor: pointer;
}

#window_function_choice:hover {
  background-color: rgba(0, 91, 245, 0.8);
}


#window_function_show {
  width: 100%;
  height: 100%;
  /*background-color: #02060a;*/
  overflow: auto;
}

#window_edit {
  width: 60%;
  height: 100%;
  /*background-color: #e5c00b;*/
  overflow: auto;
}

/*分割线，用于调整大小*/
.split_line {
  width: 8px;
  height: 100%;
  background: rgba(128, 128, 128, 0.1);
  position: relative;
  cursor: col-resize;
  z-index: 887;
  transition: background-color 0.5s;
}

.split_line:hover {
  background: rgb(97, 160, 246);
}

#split_show {
  position: fixed;
  display: none;
  height: calc(100% - 40px);
  z-index: 889;
}

#split_show_mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  background: rgba(128, 128, 128, 0.2);
  z-index: 888;
}
</style>